<template>
	<view class="box">
		<view class="iptbox">
			<u-search placeholder="请输入关键字" v-model="keyword" :show-action="false" bg-color="#e1e1e1"
				search-icon-color="#000" @input="sousuo"></u-search>
		</view>
		<view class="topbox">
			<view class="title" v-for="(item,index) in titlelist" :key="index">
				<view class="name" @click="dianji(index)">
					{{item.name}}
				</view>
				<view class="anglebox" v-if="item.flags">
					<view :class="item.flag?'anlgess':'anlges'"></view>
					<view :class="item.flag?'anlgesxias':'anlgesxia'"></view>
				</view>
			</view>
		</view>
		<!-- 列表详情 -->
		<Modkelist :listarr="list" @tiaozhuan="xiangqing"></Modkelist>

		<view class="konglist">
			<u-empty text="暂无商品" mode="list" v-if="list.length==0"></u-empty>
		</view>
	</view>
</template>

<script>
	import Modkelist from "../../components/Modkelist/index.vue"
	import {
		getintegralist
	} from "../../api/api/index.js"
	export default {
		data() {
			return {
				keyword: "",
				type_id: 0,
				page: 0,
				flag: false,
				limit: 20,
				titlelist: [{
					name: "综合",
					flags: false
				}, {
					name: "新品",
					flag: true,
					flags: true
				}, {
					name: "销量",
					flag: true,
					flags: true
				}, {
					name: "价格",
					flag: false,
					flags: true
				}],
				// 新品
				new_commodity: "down",
				// 销量
				sale_num: "down",
				// 价格
				price: "up",
				list: [],
				date: 0,
			}
		},
		methods: {
			public(flag) {
				if (flag) {
					this.flag = true
					this.page = 0
					this.list = []
				}
				this.page++
				let data = {
					type_id: this.type_id,
					search: this.keyword,
					new_commodity: this.new_commodity,
					sale_num: this.sale_num,
					price: this.price,
					page: this.page,
					limit: this.limit,
				}
				uni.showLoading({
					title: "加载中"
				})
				getintegralist(data).then(res => {
					uni.hideLoading()
					this.list = this.list.concat(res.data)
				})
			},
			// 根据箭头判断方向
			dianji(v) {
				this.titlelist[v].flag = !this.titlelist[v].flag
				if (v == 1) {
					if (this.titlelist[v].flag) {
						this.new_commodity = "down"
					} else {
						this.new_commodity = "up"
					}
				}
				if (v == 2) {
					if (this.titlelist[v].flag) {
						this.sale_num = "down"
					} else {
						this.sale_num = "up"
					}
				}
				if (v == 3) {
					if (this.titlelist[v].flag) {
						this.price = "down"
					} else {
						this.price = "up"
					}
				}
				this.page = 0
				this.flag = false
				this.list = []
				this.public()
			},
			sousuo(e) {
				let that = this
				this.date = (new Date()).getTime()
				setTimeout(function() {
					if ((new Date()).getTime() - that.date > 1999) {
						that.list = []
						that.flag = false
						that.page = 0
						that.public()
					}
				}, 2000)
			},
			// 跳转商品详情
			xiangqing(e) {
				// console.log(e.id)
				this.jumpLink({
					link: "/pagesB/jfproductxq/index",
					query: {
						id: e.id
					}
				})
			}
		},
		components: {
			Modkelist
		},
		onLoad(v) {
			this.type_id = v.id
		},
		onShow() {
			this.public()
		}
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #FFFFFF;

		.iptbox {
			margin-bottom: 20rpx;
			margin-top: 20rpx;
			width: 705rpx;
			border-radius: 80rpx;
			height: 80rpx;
			background: #e1e1e1;
			padding-left: 20rpx;
			box-sizing: border-box;
			line-height: 80rpx;
			margin: 0 auto;

			input {
				margin-left: 10rpx;
				width: 600rpx;
			}
		}

		.listbox {
			padding: 10rpx;
			box-sizing: border-box;
		}
	}

	.topbox {
		display: flex;
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 20rpx;
		box-sizing: border-box;

		.title {
			display: flex;
			width: 150rpx;
			margin-left: 20rpx;
			align-items: center;
		}

		.anglebox {
			margin-left: 10rpx;

			.anlges {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid red;
			}

			.anlgess {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-bottom: 10rpx solid #919191;
			}

			.anlgesxia {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-top: 10rpx solid #919191;
				margin-top: 10rpx;
			}

			.anlgesxias {
				width: 0;
				height: 0;
				border-left: 10rpx solid transparent;
				border-right: 10rpx solid transparent;
				border-top: 10rpx solid red;
				margin-top: 10rpx;
			}
		}
	}
</style>
